<template>
  <div>
    <DocHeader :title="data.title" fromDoc="safeNotice" />
    <div class="docMain">
      尊敬的患者：
      <div style="text-indent: 2em">
        欢迎您入住我院，您的安全是我们共同的心愿,我们为您提供以下几项安全措施，希望得到您的配合。
      </div>
      一、预防跌倒/坠床告知:<br />
      1.年老体弱、步态不稳或行动不便患者，下床活动请务必在陪护搀扶下行走，起床时请遵守“三部曲”:平躺30秒，坐起30秒，站立30秒，再行走。<br />
      2.穿着宽松、长度适宜的衣服及防滑鞋，湿性拖地后尽量避免走动。<br />
      3.若您在行走时出现头晕、双眼发黑等，立即原地蹲下或靠墙，请求帮助。<br />
      4.睡前减少饮水量并排空膀胱，便器、水杯、呼叫铃等放在伸手可及处，如需要协助，请使用呼叫铃。<br />
      5.睡觉时使用双侧护栏，陪伴者务必睡于病床一侧。<br />
      6.当您有服用降压、利尿、镇静或安眠剂等药物时，不可独自下床。<br />
      7.陪伴者注意事项: <br />
      （1）离开患者前，请主动告知医护人员。<br />
      （2）协助患者沐浴如厕时，将用物备齐，不可让患者独处，时间不宜过长。<br />
      （3）陪伴者换班时，需主动交接注意事项。遵守医院规章制度的义务。<br />
      （4）使用轮椅时，应先确认刹车已锁紧，脚踏板竖起，下坡时，轮椅应反向前进。<br />
      二、特别提醒: <br />
      1.住院患者禁止使用热水袋，严防烫伤。<br />
      2.输液、输氧、监护等过程中，不得擅自调动仪器，以免发生意外。<br />
      3.除非就医，不得将儿童带到医院，以免发生意外。<br />
      4.发生停电时，请原地等候，我们会与有关部门联系，设法尽快供电。<br />
      5.严禁吸烟，严禁使用大功率电器等违反消防安全的各种行为。<br />
      6.如遇火警，请勿慌张，听从医务人员指挥，切勿乘坐电梯。
      <div style="display: flex; align-items: center">
        7.过敏史：
        <el-radio-group v-model="allergy">
          <el-radio label="无"></el-radio>
          <el-radio label="有"></el-radio>
        </el-radio-group>
        <el-input v-model="allergy_content" style="width: 400px"></el-input>
        。
      </div>
    </div>
    <div class="flexBox">
      <div class="item">患者（家属）签名：</div>
      <div class="item">与患者的关系：</div>
    </div>
    <div class="flexBox">
      <div class="item">
        护士签名：
        <img
          v-if="signPhoto(sign, 'nursingDocument', data.type)"
          :src="
            'data:image/png;base64,' +
            signPhoto(sign, 'nursingDocument', data.type)
          "
          alt=""
          style="display: block; max-width: 98%; height: 24px"
          @click="handleSignImgClear"
        />
        <el-input
          v-else
          v-model="sign"
          style="width: 100px"
          @blur="handleSignInputBlur"
        ></el-input>
      </div>
      <div class="item">
        告知时间：
        <DateSelection
          v-model="time"
          value-format="yyyy-MM-dd HH:mm"
          :simple-op="true"
          :date-picker-show="true"
          :date-show="true"
          :no-clear="true"
          :hasBorder="false"
          :needTimeIcon="false"
          :display-num="!time"
          style="padding: 0"
        />
      </div>
    </div>
    <!-- <div class="flexBox">
      <div class="item"></div>
      <div class="item" style="text-align: right">{{ hospitalName }}</div>
    </div> -->
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs, watch } from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    patCur: {
      type: Object,
      default: () => ({})
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      allergy: '',
      allergy_content: '',
      sign: '',
      time: +new Date()
    })
    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function handleSignInputBlur() {
      queryUserSignByName([state.sign], 'nursingDocument', props.data.type)
    }

    function handleSignImgClear() {
      state.sign = ''
    }

    watch(
      user,
      val => {
        if (val) {
          queryUserSignByName([val.name], 'nursingDocument', props.data.type)
          state.sign = val.name
        }
      },
      {
        immediate: true
      }
    )
    return {
      ...toRefs(state),
      signPhoto,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';

.docMain {
  line-height: 2em;
  margin-top: 10px;
  margin-bottom: 100px;

  input {
    appearance: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #000;
  }

  .checkBoxItem {
    display: flex;
    align-items: center;

    & + .checkBoxItem {
      margin-left: 10px;
    }
  }

  .checkBox {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border: 1px solid #000;
  }
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
  margin-top: 60px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 0 4px;
    color: #000;
  }
}
</style>
